<template>
  <div>
    <ContentWrap>
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="产品名称" prop="coalType">
          <el-select
            multiple
            clearable
            v-model="queryParams.coalType"
            placeholder="请选择"
            class="!w-300px"
          >
            <el-option
              v-for="dict in coalTypeList"
              :key="dict.id"
              :label="dict.coalName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间" prop="localDates">
          <el-date-picker
            v-model="queryParams.localDates"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            :disabled-date="getDisabledStatus"
            type="daterange"
            class="!w-250px"
          />
        </el-form-item>

        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px" />
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <ContentWrap>
      <!-- 列表 -->
      <el-table
        v-loading="loading"
        :data="list"
        border
        stripe
        lazy
        row-key="id"
        :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
      >
        <el-table-column label="" width="32" align="center" fixed="left" prop="icon" />
        <el-table-column label="序号" align="center" width="60" fixed="left">
          <template #default="{ row }">
            {{ row.index }}
          </template>
        </el-table-column>
        <el-table-column
          label="日期"
          align="center"
          prop="dateTime"
          min-width="200"
          fixed="left"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="销量合计(万吨)" align="center" prop="purchaseTotal" width="150" />
        <el-table-column
          label="销售金额合计(万元)"
          align="center"
          prop="purchaseAmountTotal"
          width="150"
        />
        <el-table-column label="通知次数" align="center" prop="informNumber" width="150" />
        <el-table-column label="查看次数" align="center" prop="viewNumber" min-width="150" />
        <el-table-column label="报名次数" align="center" prop="signUpNumber" min-width="150" />
        <el-table-column label="竞价次数" align="center" prop="bidPriceNumber" min-width="150" />
        <el-table-column label="中标次数" align="center" prop="bidNumber" min-width="150" />
        <el-table-column
          label="竞价人数"
          align="center"
          prop="bidPricePopulation"
          min-width="150"
        />
        <el-table-column label="中标人数" align="center" prop="bidPopulation" min-width="150" />
        <el-table-column
          label="平均价格(元/吨)"
          align="center"
          prop="averagePrice"
          min-width="150"
        />
        <el-table-column
          label="平均起拍价(元/吨)"
          align="center"
          prop="averageStartPrice"
          min-width="150"
        />
        <el-table-column
          label="平均溢价(元/吨)"
          align="center"
          prop="averagePremium"
          min-width="150"
        />
        <el-table-column
          label="最高中标价格(元/吨)"
          align="center"
          prop="highestBidPrice"
          min-width="160"
        />
        <el-table-column
          label="最低中标价格(元/吨)"
          align="center"
          prop="lowestBidPrice"
          min-width="160"
        />
        <el-table-column
          label="保证金合计(万元)"
          align="center"
          prop="marginTotal"
          min-width="150"
        />
        <el-table-column
          label="保证金扣款合计(万元)"
          align="center"
          prop="marginDeductionTotal"
          min-width="180"
        />
        <el-table-column
          label="退保证金合计(万元)"
          align="center"
          prop="returnMarginTotal"
          min-width="150"
        />
        <el-table-column
          label="充值金额(万元)"
          align="center"
          prop="rechargeAmount"
          min-width="150"
        />
        <el-table-column
          label="可用资金余额(万元)"
          align="center"
          prop="availableFunds"
          min-width="150"
        />
        <el-table-column label="保证金余额(万元)" align="center" prop="bond" min-width="150" />
      </el-table>
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </div>
</template>
<script setup lang="ts" name="enterpriseDayStat">
import * as dataCenter from '@/api/dataCenter'
import { getDisabledStatus } from '@/utils/common'
import { cloneDeep } from 'lodash-es'

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryFormRef = ref()
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  coalType: [],
  localDates: []
})
const coalTypeList: Record<string, any> = ref([])

/** 查询列表 */

const getList = async () => {
  loading.value = true
  try {
    const params: Record<string, any> = cloneDeep(queryParams.value)
    if (params.coalType.length) {
      params.coalId = params.coalType.join(',')
    }
    delete params.coalType
    const data = await dataCenter.getCompanyStatisticsPage(params)
    list.value = handleList(data.list || [])
    total.value = data.total || 0
  } finally {
    loading.value = false
  }
}

const handleList = (list) => {
  return list.map((e, v) => {
    e.index = v + 1
    e.dateTime = e.dateTime.join('-')
    if (e.statisticsBaseVOList?.length) {
      e.children = e.statisticsBaseVOList.map((m, n) => {
        m.dateTime = m.coalType
        return m
      })
    }
    return e
  })
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNo = 1
  list.value = []
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const bidCoalManageList = async () => {
  const res = await dataCenter.bidCoalManageList()
  coalTypeList.value = res || []
}

/** 初始化 **/
onMounted(() => {
  bidCoalManageList()
  getList()
})
</script>
